<template>
    <div class="map-mapMode">
        <div class="map-header">
            <div class="header-item" :class="{ 'active': mapMode === 'Map' }" @click="changeMapmapMode">默认</div>
            <div class="header-item" :class="{ 'active': mapMode === 'Walk' }" @click="changeWalkmapMode">第一人称</div>
        </div>
        <div class="interation_text" v-if="mapMode === 'Map'">
            <div><span>鼠标左键</span><span>平移</span></div>
            <div><span>鼠标右键</span><span>旋转</span></div>
            <div><span>鼠标中键</span><span>上下翻转</span></div>
            <div><span>鼠标滚轮</span><span>缩放</span></div>
        </div>
        <div class="jump" v-if="ueIsShow && mapMode === 'Walk'">
            <span>跳跃初始速度：</span>
            <el-input-number v-model="jumpZVelocity" controls-position="right" size="small" :min="0" /> &nbsp;m/s
        </div>
        <div class="interation_text" v-if="mapMode === 'Walk'">
            <div><span>W( ↑ )</span><span>水平方向前进</span></div>
            <div><span>A</span><span>水平方向左移</span></div>
            <div><span>S ( ↓ )</span><span>水平方向后退</span></div>
            <div><span>D</span><span>水平方向右移</span></div>
            <div><span>←</span><span>水平方向左转</span></div>
            <div><span>→</span><span>水平方向右转</span></div>
            <div v-if="ueIsShow && mapMode === 'Walk'"><span>Space</span><span>空格跳跃</span></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, watch } from "vue";

import { getProjectManager } from '@/scripts/getProjectManager';
import { ElMessage } from "element-plus";
import { createVueDisposer, toVR } from "earthsdk-ui";

const objm = getProjectManager()
const d = createVueDisposer(onBeforeUnmount);

const ueIsShow = toVR<boolean>(d, [objm, 'ueIsShow'])

const jumpZVelocity = ref<number>(4.2)

const mapMode = toVR<string>(d, [objm, 'mapMode'])

//调用点击返回拾取信息函数
let dispose: any

//修改模式为第一人称
const changeWalkmapMode = () => {
    destroy()
    const viewer = objm.activeViewer
    if (!viewer) return
    viewer.changeToMap()
    mapMode.value = 'Walk'
    ElMessage({
        message: '请点击选择一个位置点',
        type: 'warning',
    })
    dispose = ueActorResult()
}
//修改模式为默认
const changeMapmapMode = () => {
    const viewer = objm.activeViewer
    if (!viewer) return
    viewer.changeToMap()
    mapMode.value = 'Map'
}

const position = ref<[number, number, number]>([0, 0, 0])
const ueActorResult = () => {
    const viewer = objm.activeViewer
    if (!viewer) return
    let disposeUe = viewer.clickEvent.donce(async (e: any) => {
        if (!e.screenPosition) return;
        let result:any
        if (viewer.typeName == "ESCesiumViewer") {
            result = await viewer.quickPickPosition(e.screenPosition)
        }else {
            result = await viewer.pickPosition(e.screenPosition)
        }
        if (!result) return;
        const pos = [Number(result[0].toFixed(7)), Number(result[1].toFixed(7)), Number(result[2].toFixed(2)) + 2] as [number, number, number]
        position.value = [...pos]
        viewer.changeToWalk(position.value, jumpZVelocity.value)
    });
    return disposeUe
}

const destroy = () => {//销毁
    if (dispose) dispose()
}

watch([jumpZVelocity], () => {
    const viewer = objm.activeViewer
    if (!viewer) return
    viewer.changeToWalk(position.value, jumpZVelocity.value)
})

onMounted(() => {
    const viewer = objm.activeViewer
    if (!viewer) return

})

onBeforeUnmount(() => destroy())

</script>
<style scoped>
.map-mapMode {
    position: fixed;
    right: 10px;
    top: 60px;
    min-width: 200px;
    max-width: 300px;
    width: 250px;
    background: #fff;
    z-index: 200;
    border: 1px solid rgba(180, 180, 180, 1);
    box-sizing: border-box;
    border-radius: 5px;
    padding: 10px;

}

.map-header {
    display: flex;
}

.header-item {
    padding: 5px 10px;
    cursor: pointer;
}

.active {
    color: #647bff;
    border-bottom: 1px solid #647bff;
}

.map-info {
    font-size: 12px;
}

.jump {
    display: flex;
    align-items: center;
    margin: 10px 0;
    font-size: 12px;
}

:deep(.el-input-number .el-input__inner) {
    text-align: left !important;
}
</style>